<script setup lang="ts">
// import HelloWorld from '@/components/HelloWorld.vue';
import {useUserStore} from '@/store/user';
import {storeToRefs} from 'pinia';
import API from '@/api';

const requestRes = async () => {
    const res = await API.login('test', 'test');
    console.log(res);
};

const userStore = useUserStore(); // 获取
userStore.updateName('行政服务技术提升'); // 修改

// const { name } = userStore // state可以使用解构获取值， 但是直接解构会让值失去响应式，

const {name} = storeToRefs(userStore); // 而使用 pinia的 storeToRefs 可以在解构的同时，保留其响应式特点

console.log(userStore.fullName); // getters中再运算的值可以直接获取响应式数值
</script>
<template>
    <!-- <HelloWorld msg="Vite + Vue" /> -->
    <h2>Hello</h2>
    <h2>欢迎使用物品借用~</h2>
    <div class="wrap-long">
        <h3>长期物品</h3>
        <div class="content">
            <div class="item">
                <van-image
                    width="5rem"
                    height="5rem"
                    fit="contain"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                />
                <div>说明</div>
            </div>
            <div class="item">
                <van-image
                    width="5rem"
                    height="5rem"
                    fit="contain"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                />
                <div>说明</div>
            </div>

            <div class="item">
                <van-image
                    width="5rem"
                    height="5rem"
                    fit="contain"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                />
                <div>说明</div>
            </div>
            <div class="item">
                <van-image
                    width="5rem"
                    height="5rem"
                    fit="contain"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                />
                <div>说明</div>
            </div>
        </div>
    </div>
    <div></div>
</template>

<style scoped lang="less">
.content {
    display: flex;
    .item {
        margin: 0 2px;
    }
}
</style>
